<template>
  <div class="page-content pt-24">
    <p class="title p-0-16 mb-12">{{ $t('contact_us') }}</p>
    <div class="list p-0-16 mb-24">
      <div class="item">
        <div class="header mb-4">
          <div class="point mr-8"></div>
          <p>{{ $t('telephone') }}</p>
        </div>
        <p class="text mb-4">+855 023 922 788</p>
        <p class="text">+855 023 922 789</p>
      </div>
      <div class="item">
        <div class="header">
          <div class="point mr-8"></div>
          <p>{{$t('mailbox')}}</p>
        </div>
        <p class="text">support@tnaot.com</p>
      </div>
      <div class="item">
        <div class="header">
          <div class="point mr-8"></div>
          <p>{{$t('user_feedback')}}</p>
        </div>
        <p class="text black">{{$t('please_open_tnaot_app_and_go_to_menu')}}</p>
        <p class="text black">{{$t('suggestion_feedback')}}</p>
      </div>
    </div>

    <div class="cross-line mb-24"></div>

    <p class="title p-0-16 mb-12">{{$t('follow_us')}}</p>
    <div class="list p-0-16 mb-24" :class="className">
      <div class="item" :class="className">
        <div class="header mb-4">
          <div class="point mr-8"></div>
          <p>Facebook</p>
        </div>
        <p class="text">https://www.facebook.com/tnaot.kh</p>
      </div>
      <div class="item" :class="className">
        <div class="header">
          <div class="point mr-8"></div>
          <p>Youtube</p>
        </div>
        <p class="text">https://www.youtube.com/c/TNAOT</p>
      </div>
      <div  v-if="language == 'zh'" class="item" :class="className">
        <div class="header">
          <div class="point mr-8"></div>
          <p>微信公众号</p>
        </div>
        <img class="img" src="../../../assets/images/tnaot_wechat_official.png" alt="">
      </div>
    </div>
    <div class="list p-0-16 mb-24">
      <div class="item">
        <div class="header">
          <div class="point mr-8"></div>
          <p>Tiktok</p>
        </div>
        <p class="text">www.tiktok.com/@tnaot_app</p>
      </div>
      <div class="item">
        <div class="header">
          <div class="point mr-8"></div>
          <p>Telegram</p>
        </div>
        <p class="text">https://t.me/TnaotNews_KH </p>
      </div>
    </div>
    <div class="cross-line mb-24"></div>
  </div>
</template>

<script>
export default {
  name: 'FriendlyLinkPage',

  computed: {
    language() {
      return this.$store.state.app.language;
    },

    className() {
      return this.language === 'zh' ? 'h-100' : ''
    }
   },
};
</script>

<style lang="scss" scoped>
@import '~assets/styles/variable.scss';

.page-content {
  width: $page-width;
  margin: 0 auto;

  .title {
    font-size: 28px;
    color: #0c0c1c;
    letter-spacing: 0;
    line-height: 48px;
    font-weight: 500;
  }

  .cross-line {
    width: 100%;
    height: 2px;
    background: rgba(12, 12, 28, 0.08);
  }

  .list {
    display: flex;
    align-items: center;
    height: 80px;

    .item {
      height: 80px;
      width: 33%;

      .header {
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #0c0c1c;
        letter-spacing: 0;
        line-height: 24px;
        font-weight: 500;
        height: 24px;

        .point {
          width: 4px;
          height: 16px;
          background: #fa4646;
          border-radius: 2px;
        }
      }

      .text {
        font-size: 16px;
        color: #1a88ee;
        letter-spacing: 0;
        line-height: 24px;
        font-weight: 500;
        margin-left: 12px;
      }

      .black {
        color: #0c0c1c;
      }
    }
  }
}

.h-100 {
  height: 100px !important;
}

.img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-left: 12px;
}
</style>
